<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gis平台</title>
<style>
html,body {
	width: 100%;
	height: 100%;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	font-size:12px;
	overflow:hidden;
}
body,h3,ul,li {
	margin: 0;
	padding: 0;
}
h3,th{
	font-weight:normal;
}
.ul,ul li {
	list-style-type: none;
}
a{
	text-decoration: none;
}

.header {
	width: 100%;
	height: 30px;
	position: absolute;
	top: 0;
	/*以上设置是重点必须的*/
	line-height: 50px;
}

.header h3 {
	margin-left: 12px;
	color: #0075C7;
	height: 150px;

}

.mainBox {
	width: 100%;
	position: absolute;
	top: 120px;
	bottom: 0;
	/*以上设置是重点必须的*/
}

.mainBox .leftBox {
	height: 100%;
	width: 240px;
	float: left;
	overflow: auto;
	/*以上设置是重点必须的*/
	background: #f8f8ee;
	font-size: 12px;
	font-family: "Microsoft Yahei", "SimSun", Arial;
	border-right: 1px solid #D9D9D9;
	border-top: 1px solid #D9D9D9;
}

.menuItem a,.menuItem a:visited {
	padding-left: 20px;
	width: 220px;
	height: 32px;
	background-color: #f8f8f8;
	border-bottom: solid 1px #EAEAEA;
	border-top: solid 1px #FFFFFF;
	display: block;
	line-height: 32px;
	color: #000000;
}

.menuItem a:hover,.menuItem a:active {
	background: #f2f2f2;
	color: #0075c7;
}

.menuItem img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 10px;
}

.mainBox .rightBox {
	height: 100%;
	margin-left: 241px;
	/*以上设置是重点必须的*/
	padding-right: 1px;
	padding-left: 1px;
	border-left: 1px solid #E6E6E6;
	border-top: 1px solid #D9D9D9;
	overflow: auto;
}

.slideBtn {
	cursor: pointer;
	width: 1em;
	position: absolute;
	top: 40%;
	left: 1;
	display: block;
}


</style>
<script type="text/javascript"src="jquery.js"></script>
 <script src="https://mapapi.qq.com/web/jsapi/jsapi-gl/js/dom-to-image.min.js"></script>

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=MZQBZ-EKRKU-SK5VS-2DA2P-GIL6V-BUBEL"></script>
 <script src="https://map.qq.com/api/gljs?v=1.exp&key=MZQBZ-EKRKU-SK5VS-2DA2P-GIL6V-BUBEL"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=MZQBZ-EKRKU-SK5VS-2DA2P-GIL6V-BUBEL"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=MZQBZ-EKRKU-SK5VS-2DA2P-GIL6V-BUBEL"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
    #info{
        position: absolute;
        left: 250px;
        top: 20px;
        font-size: 14px;
        background: #FFF;
        width: 270px;
        padding: 10px;
        border-radius: 3px;
    }

    input {
      position: absolute;
      top: 60px;
      z-index: 9999;
    }
    #btn-2d {
      left: 250px;
    }
    #btn-3d {
      left: 330px;
    }


  /*  图层样式*/
    .btn {
      position: absolute;
      top: 90px;
      z-index: 1001;
      padding: 1px 2px;
    }
    .btn-left {
      left: 250px;
    }
    .btn-right {
      left: 340px;
    }

	/*搜索*/
     #panel {
        position: absolute;
        background: #FFF;
        width:200px;
        /*padding: 1px;*/
        z-index: 9999;
        top: 1px;
        left: 150px;
    }

    /*截图功能*/
    button {
        /*position: absolute;
        left: 10px;
        top: 10px;
        z-index: 9999;*/
        padding: 10px 14px;
        box-sizing: border-box;
        border: none;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        line-height: 14px;
        transition: .3s;
      }
      .disabled {
        background-color: #979595;
      }
      .enable {
        background-color: #3876ff;
      }

     /* ip定位*/
        #panelIP {
         position: absolute;
        background: #FFF;
        width:350px;
        padding: 2px;
        z-index: 9999;
        top: 5px;
        left: 400px;
    }

</style>


</head>

<body onload="initMap()">
	<div class="header">
		<h3>
			基于腾讯地图的地理信息平台
		</h3>
		<div id="panel">
        		<!-- <p>输入关键字，按下搜索</p> -->
        			<input id='keyword' type="text" value='地铁站' >
        			<input id="search" type="button" class="btn" value="搜索" onclick="searchByKeyword()" />
    	</div>
    	<div id="panelIP">
    		  <p>
		          <input type='text' id='ipInput' style="left: 102px" placeholder="IP地址(默认为请求IP)" size='20'/>
		          <input type='button' id='locate' value='搜索所在位置' onclick='locate()' />
       		 </p> 
       		 <p id="ipLocationResult"></p>

    	</div> 

		


	</div>
	<div class="mainBox">
		<div class="leftBox">

			<div class="menuItem zzjg">
				<a href="../xionyuanjun/devment.html">行政区</a>
			</div>
			<div class="menuItem ygfc">
				<a href="../xionyuanjun/ipToLocation.html">ip归属查询</a>
			</div>
			<div class="menuItem wghf">
				<a href="../xionyuanjun/nearSearch.html">周边推荐</a>
			</div>
			<div class="menuItem xxyd">
				<a href="../xionyuanjun/gisMap_test9.html">地图标记</a>
			</div>
			<div class="menuItem tzgg">
				<a href="../xionyuanjun/gisMap_test10.html">回家的路</a>
			</div>
			<div class="menuItem xwzx">
				<a href="../xionyuanjun/gisMap_test7.html"
					target="_blank">叠加/分解
				</a>
					<button onclick="screenshot()" disabled="disabled" id="export" class="disabled">点击导出地图截图</button>
			</div>
		</div>
		<div class="rightBox">
			<div class="slideBtn">伸缩</div>
			<div id="container"></div>
    		<div id="info">当前点击坐标为：<span id="position"></span></div>

    		<input type="button" id="btn-2d" onclick="change2D()" value="切换2D">
    		<input type="button" id="btn-3d" onclick="change3D()" value="切换3D">

    		<input type="button" class="btn btn-left" onclick="changeBaseMap({type: 'satellite'})" value="设置为卫星图">
			<input type="button" class="btn btn-right" onclick="changeBaseMap({type: 'vector'})" value="设置为矢量图">

			

			<script>
				var map;
				var center;
				var search;  //搜索类
				var markers; //图标
				var ipLocation; //ip类
				var markersip  //ip图标

		        function initMap() {
		            var position = document.getElementById("position");

		            center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
		            //初始化地图
		            map = new TMap.Map("container", {
		                center: center,
		                renderOptions: {
				          // renderOptions文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap#10
				          preserveDrawingBuffer: true, // 保留地图的渲染缓冲 默认false
        				},
		            });

		            
		            //绑定点击事件
		            map.on("click",function(evt){
		                var lat = evt.latLng.getLat().toFixed(6);
		                var lng = evt.latLng.getLng().toFixed(6);
		                position.innerHTML = lat + "," + lng;
		            })


		              // 创建信息窗
			      	let info = new TMap.InfoWindow({map,position: map.getCenter()}).close();

			      	//点击poi
			      	map.on('click', (evt) => {
			        	// 获取click事件返回的poi信息
			        	let poi = evt.poi;
			        	if (poi) {
			          	// 拾取到POI
			          	info.setContent(poi.name).setPosition(poi.latLng).open();
			        	} else {
			          	// 没有拾取到POI
			          	info.close();
			        	}
			      	});


			      	 map.on('tilesloaded', function () {
				        // 当地图容器中可见的瓦片加载完后会触发此事件。
				        var button = document.querySelector('#export');
				        button.disabled = false;
				        button.className = 'enable';
			        });
		        }


				ipLocation = new TMap.service.IPLocation(); // 新建一个IP定位类
				markersip = new TMap.MultiMarker({
				  map: map,
				  geometries: [],
				});


				function locate() {
				  var ipInput = document.getElementById('ipInput').value;
				  var params = ipInput ? { ip: ipInput } : {};
				  ipLocation
				    .locate(params)
				    .then((result2) => {
				      // 未给定ip地址则默认使用请求端的ip
				      var { result } = result2;
				      markersip.updateGeometries([
				        {
				          id: 'main',
				          position: result.location, // 将所得位置绘制在地图上
				        },
				      ]);
				      map.setCenter(result.location);
				      document.getElementById(
				        'ipLocationResult'
				      ).innerText = `您的IP/您输入的IP所在位置：${result.ad_info.nation}，${result.ad_info.province}`;
				    })
				    .catch((error) => {
				      document.getElementById(
				        'ipLocationResult'
				      ).innerText = `错误：${error.status}，${error.message}`;
				    });
				}

				// locate();





		       
		        function change2D() {
              		map.setViewMode('2D');
           		 }

            	function change3D() {
              		map.setViewMode('3D');
              		map.setPitch(70);
            	}

            	// 动态设置底图类型
				function changeBaseMap(baseMap) {
					map.setBaseMap(baseMap);
				}

				
				//关键词搜索搜索
				function searchByKeyword() {

					search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
					markers = new TMap.MultiMarker({
				  	map: map,
				  	geometries: [],
					});

					var infoWindowList = Array(100);


				  	infoWindowList.forEach((infoWindow) => {
				    	infoWindow.close();
				  	});
				  	infoWindowList.length = 0;
				  	markers.setGeometries([]);
				  	// 在地图显示范围内以给定的关键字搜索地点
					search
					    .searchRectangle({
					      keyword: document.getElementById('keyword').value,
					      bounds: map.getBounds(),
					    })
					    .then((result) => {
					      result.data.forEach((item, index) => {
					        var geometries = markers.getGeometries();
					        var infoWindow = new TMap.InfoWindow({
					          map: map,
					          position: item.location,
					          content: `<h3>${item.title}</h3><p>地址：${item.address}</p><p>电话：${item.tel}</p>`,
					          offset: { x: 0, y: -50 },
					        }); // 新增信息窗体显示地标的名称与地址、电话等信息
					        infoWindow.close();
					        infoWindowList[index] = infoWindow;
					        geometries.push({
					          id: String(index), // 点标注数据数组
					          position: item.location,
					        });
					        markers.updateGeometries(geometries); // 绘制地点标注
					        markers.on('click', (e) => {
					          infoWindowList[Number(e.geometry.id)].open();
					        }); // 点击标注显示信息窗体
					      });
					    });
				}

				//截图
			    function screenshot() {
			        // 截图操作
			        var node = document.getElementById('container');
			        domtoimage
			          .toPng(node)
			          .then(function (dataUrl) {
			            // 导出图片
			            var link = document.createElement('a');
			            link.download = 'image.png';
			            link.href = dataUrl;
			            link.click();
			          })
			          .catch(function (error) {
			            console.error('domtoimage 出现问题! ', error);
			          });
			     }
		  	 </script>

		</div>
	</div>
	<script type="text/javascript">
		//左侧菜单栏伸缩效果
		$('.slideBtn').click(
			function() {
				$('.leftBox').toggle();
				var status = $('.leftBox').css("display");
				if (status == 'none') {
					$('.rightBox').css("marginLeft", "0");
					$(this).css("background",
							"red");
				} else {
					$('.rightBox').css("marginLeft", "241px");
					$(this).css("background",
							"green");
				}
			});
	</script>
</body>
</html>


